<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <style>
        .floors {
            background-color: white;
            display: flex;
            flex-direction: column;
            margin-top: 50px;
            align-items: center;
        }
        ._con_water_fall {
            position: absolute;
            display: none;
        }
        .demo_water_flow_container::-webkit-scrollbar{
            display:none
        }
        .xx_card {
            background-color: white;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            margin: 20px;
            width: 200px;
            /* border: 1px solid #eaeaea00; */
            cursor: pointer;
            transition: all 0.6s;
        }
        .xx_card:hover{
            border: 2px solid #eaeaea00;
            transform: scale(1.2);
        }
    </style>
</head>

<body>
    <div class="floors">
        <img src="http://blog.diyxi.top:60/img/icon/today.jpg">
        <div id="demo_x" class="" ></div>
    </div>

</body>

<!-- 必要 -->
<script src="https://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="./render_somthing.js"></script>
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.0-alpha1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.0-alpha1/js/bootstrap.min.js"></script>
<script>
    {
        var render_somthing_demo_x;
        render_somthing_demo_x = new render_somthing();
        render_somthing_demo_x.init({
            // div的id
            id: "#demo_x",
            // x/y/flow   分别为x向滚动、y向滚动、瀑布流
            method: "x",
            // 容器是指即将渲染内容的外围容器，可以为div/table/ul ...
            container: {
                html: `
<div style="display:flex;flex-wrap: wrap;justify-content: center;"></div>
    `
            },
            // 渲染内容的配置
            content: {
                default: `
                <div class="xx_card"><img src="#{img}" style="height: 200px;"> 
                <h6>#{name}</h6> 
                <h6 style="color: rgb(255, 87, 34);">折扣价：<span style="font-size: 30px; color: red;">#{price}</span>元</h6>
                 <h6>分类：#{category}</h6>
                 </div>
`,
            },
            // 条件渲染内容
            /*
                ^{ROW_INDEX} - 常量，表示数据数组的下标
                #{title}     - 变量，表示数据数组中对象的key
            */
            condition: [
            ],
        })
        render_somthing_demo_x.render([{
                        img: "http://blog.diyxi.top:60/img/bookimg/3.jpg",
                        name: "穿越计算机迷雾",
                        price:"199",
                        category:"计算机科学"
                    }, {
                        img: "http://blog.diyxi.top:60/img/bookimg/4.jpg",
                        name: "计算机组装",
                        price:"99.9",
                        category:"计算机科学"
                    }, {
                        img: "http://blog.diyxi.top:60/img/bookimg/5.jpg",
                        name: "微型计算机原理",
                        price:"88.88",
                        category:"计算机科学"
                    }, {
                        img: "http://blog.diyxi.top:60/img/bookimg/6.jpg",
                        name: "量子计算机",
                        price:"68.8",
                        category:"计算机科学"
                    }, {
                        img: "http://blog.diyxi.top:60/img/bookimg/7.jpg",
                        name: "九条命的猫",
                        price:"19.9",
                        category:"中国童话"
                    }, {
                        img: "http://blog.diyxi.top:60/img/bookimg/8.jpg",
                        name: "谜语大全",
                        price:"28.8",
                        category:"中国童话"
                    }, ]);
    }
</script>

</html>